<template>
	<view class="lucky_plaza">
		<view v-if="!isAll" class="title" @click="goTaskList">--{{item.name}}--</view>
		<view class="content">
			<view @click="goTaskDetail(d.t_id)" class="product" v-for="(d,index) in taskList" :key="index">
				<image :src="d.photo"></image>
				<text class="name otw">{{d.text}}</text>
				<text class="detail c_868686 otw"><text>距离开奖</text><text
						class="special">{{d.end_time|days}}</text><text>天</text><text
						class="special">{{d.end_time|hours}}</text><text>时</text><text
						class="special">{{d.end_time|minutes}}</text><text>分</text></text>
				<view class="btn_box">
					<view class="lucky_btn">免费抽奖</view>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	export default {
		props: ["item", "isAll", "end"],
		data() {
			return {
				imgPath: uni.imgPath
			}
		},
		methods: {
			goTaskDetail(tId) {
				uni.navigateTo({
					url: `/pagesTask/tastDetail/index?tastId=${tId}`
				})
			},
			goTaskList() {
				if (!this.isAll) {
					uni.navigateTo({
						url: `/pagesTask/taskList/index?id=${this.item.id}`
					})
				}
			}
		},
		filters: {
			days(val) {
				var time = Math.abs(new Date(val).getTime() - new Date().getTime());
				return Math.floor(time / (24 * 60 * 60 * 1000));
			},
			hours(val) {
				var time = Math.abs(new Date(val).getTime() - new Date().getTime());

				return Math.floor((time % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
			},
			minutes(val) {
				var time = Math.abs(new Date(val).getTime() - new Date().getTime());

				return Math.floor((time % (60 * 60 * 1000)) / (60 * 1000));
			}
		},
		computed: {
			taskList: function() {

				if (this.isAll) {
					return this.item.task_list
				} else {
					var end = this.end ? this.end : 4;
					var arr = this.item.task_list.slice(0, end)
					return arr
				}


			}
		}
	}
</script>
<style lang="scss" scoped>
	.lucky_plaza {
		margin-top: 20rpx;

		.title {
			text-align: center;
			color: #3C95F5;
			font-weight: bold;
			font-size: 28rpx;
		}

		.content {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;
			justify-content: space-between;

			.product {

				text-align: center;
				background-color: #fff;
				height: 500rpx;
				width: 345rpx;
				border-radius: 30rpx;
				overflow: hidden;
				margin-bottom: 20rpx;

				&:nth-child(2n) {
					margin-left: 2%;
				}

				.detail {
					display: flex;
					justify-content: center;
					height: 60rpx;
					align-items: center;
					line-height: 60rpx;
					font-size: 24rpx;

					.special {
						color: #f00;
						margin: 0 4rpx;
					}
				}

				image {


					height: 300rpx;
					width: 100%;
				}



				.name {
					font-size: 24rpx;
					display: block;
					padding: 0 10rpx;
				}

				.detail {}

				.btn_box {
					display: flex;
					justify-content: center;

					.lucky_btn {

						padding: 0;
						line-height: 48rpx;
						height: 48rpx;
						width: 189rpx;
						border-radius: 12rpx;
						background: linear-gradient(180deg, #fff 0%, #CBEAFF 100%);
						border: 1px solid #2899FE;


						color: #0055A3;
						font-size: 26rpx;
					}
				}

			}
		}
	}
</style>